<template>
  <div>
    <i class="el-icon-bell" style="cursor: pointer" v-if="this.$store.state.user.messageCount == 0" @click="handleClickMessage"></i>
    <i class="el-icon-message-solid" style="cursor: pointer" v-if="this.$store.state.user.messageCount != 0" @click="handleClickMessage"></i>
    <el-badge :value="this.$store.state.user.messageCount" class="item"  v-if="this.$store.state.user.messageCount != 0">
    </el-badge>

    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="700px" append-to-body>

      <el-table v-loading="loading" :data="messageList" ref="multipleTable" @selection-change="handleSelectionMessage">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="消息名称" align="center" prop="messageName" width="100px"/>
        <el-table-column label="消息标题" align="center" prop="messageTitle" show-overflow-tooltip/>
        <el-table-column label="创建时间" align="center" prop="createTime" width="150px"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-share"
              @click="handleJump(scope.row)"
            >处理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </el-dialog>


  </div>

</template>

<script>

  import { getMessageCount, listMessage } from "@/api/common/message";

export default {
  name: 'Message',
  data() {
    return {
      // 是否有数量
      showCount: false,
      // 遮罩层
      loading: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表格数据
      messageList: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.getMessageCount();
  },
  methods: {
    // 查询消息数量
    getMessageCount() {
      getMessageCount().then(response => {
        this.$store.commit("SET_MESSAGE_COUNT", response.messageCount);
      });
    },
    handleClickMessage() {
      this.open = true;
      this.title = "消息列表";
      this.getList();
    },
    // 查询消息列表
    getList() {
      this.loading = true;
      listMessage(this.queryParams).then(response => {
        this.messageList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionMessage(selection) {
      this.ids = selection.map(item => item.messageId);
      this.single = selection.length!== 1;
      this.multiple = !selection.length;
    },
    // 跳转
    handleJump(row) {
      this.open = false;
      this.$router.push(row.messageUrl);
    }
  }
}
</script>
